<template>
  <div>
    <div class="choose">
      <div class="item">
        <span>语种:</span>
        <ul>
          <li @click="getArtist(null)">全部</li>
          <li @click="getArtist(1)">华语</li>
          <li @click="getArtist(2)">欧美</li>
          <li @click="getArtist(4)">日本</li>
          <li @click="getArtist(3)">韩国</li>
          
        </ul>
      </div>
  
      <div class="singerList">
        <ul>
          <li v-for=" i in artistList" :key="i.id" @click="toArtist(i.id)">
            <div><img v-lazy="i.img1v1Url" alt=""></div>
            <div class="name">{{i.name}}</div>
          </li>
        
         
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
data(){
  return{
    artistList:[]
  }
},
methods:{
  getArtist(type){
   if(type){
    this.$request({
      url:'/toplist/artist',
      params:{
        type:type
      }
    }).then(success=>{
      this.artistList=success.data.list.artists
    })
   }else{
     this.$request({
       url:'/toplist/artist'
     }).then(success=>{
       this.artistList=success.data.list.artists
      
     })
   }
  },
  toArtist(id){
    this.$router.push({name:'zhuanji',query:{id:id}})
  }
},
mounted(){
  this.$request({
    url:'/toplist/artist'
  }).then(success=>{
    this.artistList=success.data.list.artists
    
  })
}
}
</script>

<style scoped>
.item{
  display: flex;
  line-height: 20px;
  margin-bottom: 10px;
}
.item span{
  width: 52px;
 
}
.item ul {
  display: flex;
  text-align: center;
}
.item ul li{
  width: 100px;
  height: 20px;


  border-right: 1px solid #ccc;
}
.item ul li:last-child{
  border-right: none;
}

.singerList{
  margin-top: 20px;
}
.singerList ul {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.singerList ul li{
  width: 160px;
  border-radius: 10px;
  margin-bottom: 20px;
}
.singerList ul li img{
  width: 160px;
  border-radius: 10px;
}
.name{
  margin-top: 10px;
}
</style>